<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>allOrders</title>
	<link rel="stylesheet" href="./reset.css" />
	<style>
		.container{
			width: 100%;
			height: 100%;
			background: #efefef;
			display: flex;
			flex-direction: column;
		}
		.header{
			width: 100%;
			height: 1rem;
			background: white;
			display: flex;
			flex-direction: row;
			text-align: center;
			/*border-bottom: 1px solid #eeeeee;*/
			position: fixed;
			left: 0;
			top: 0;
		}
		.back_img{
			width: 0.5rem;
			height: 0.55rem;
			margin-top: 0.23rem;
			/*margin-left: 0.1rem;*/
		}
		.allOrders{
			flex: 1;
			margin-top: 0.28rem;
			font-size: 0.32rem;
			color: #323232;
			font-weight: 550;
		}
		.nav{
			width: 100%;
			background: white;
			/*margin-top: 0.02rem;*/
			margin-top: 1.02rem;
			height: 0.78rem;
		}
		.nav ul{
			display: flex;
		}
		.nav ul li{
			flex: 1;
			text-align: center;
			line-height: 0.78rem;
			font-size: 0.28rem;
			
		}
		.nav ul li:first-child{
			border-bottom: 2px solid #e2181c;
		}
		.main{
			background: white;
			width: 100%;
			height: 100%;
			margin-top: 0.23rem;
		}
		.content{
			width: 100%;
		}
		.main .content p{
			height: 0.79rem;
			line-height: 0.79rem;
		}
		.main .content p .font{
			font-size: 0.28rem;
			/*font-weight: bold;*/
		}
		.dai{
			float: right;
			margin-right: 0.21rem;
		}
		.ding{
			margin-left: 0.23rem;
			margin-right: 0.19rem;
		}
		.one_p{
			border-bottom: 1px solid #efefef;
		}
		.price::before{
			content: "￥";
		}
		.cancellationOfOrder{
			display: inline-block;
			width: 1.15rem;
			height: 0.43rem;
			border: 1px solid #f05d60;
			line-height: 0.43rem;
			margin-top: 0.16rem;
			border-radius: 0.07rem;
			font-size: 0.23rem;
			color: #f05d60;
			text-align: center;
		}
		.goods{
			width: 100%;
			height: 1.58rem;
			display: flex;
			align-items: center;
			/*background: pink;*/
			border-bottom: 1px solid #efefef;
		}
		.goods_img{
			width: 1.20rem;
			height: 1.20rem;
			margin-left: 0.20rem;
			margin-right: 0.40rem;
		}
		.goods_desc{
			display: inline-block;
			height: 0.71rem;
			font-size: 0.3rem;
			margin-right: 0.35rem;
			flex: 1;
		}
		.cheng{
			font-size: 0.25rem;
			margin-top: 1rem;
			color: #969696;
		}
		.num{
			font-size: 0.25rem;
			margin-top: 1rem;
			margin-right: 0.2rem;
			margin-left: 0.07rem;
			color: #969696;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="header">
			<img src="./back.png" alt="" class="back_img" />
			<span class="allOrders">全部订单</span>
		</div>
		<div class="nav">
			<ul>
				<li>全部订单</li>
				<li>待支付</li>
				<li>待收货</li>
				<li>待评价</li>
			</ul>
		</div>
		<div class="main">
			<div class="content">
				<p class="one_p">
					<span class="ding font">订单编号:</span><span class="font">539666012</span><span class="dai font">待付款</span>
				</p>
				<div class="goods">
					<img src="./clothing.jpg" alt="" class="goods_img" />
					<span class="goods_desc">国家队全英赛比赛 正品李宁羽毛球女羽毛球 短裙</span>
					<span class="cheng">x</span><span class="num">5</span>
				</div>
				<div class="goods">
					<img src="./clothing.jpg" alt="" class="goods_img" />
					<span class="goods_desc">国家队全英赛比赛 正品李宁羽毛球女羽毛球 短裙</span>
					<span class="cheng">x</span><span class="num">5</span>
				</div>
				<div class="goods">
					<img src="./clothing.jpg" alt="" class="goods_img" />
					<span class="goods_desc">国家队全英赛比赛 正品李宁羽毛球女羽毛球 短裙</span>
					<span class="cheng">x</span><span class="num">5</span>
				</div>
				<div class="goods">
					<img src="./clothing.jpg" alt="" class="goods_img" />
					<span class="goods_desc">国家队全英赛比赛 正品李宁羽毛球女羽毛球 短裙</span>
					<span class="cheng">x</span><span class="num">5</span>
				</div>
				<p>
					<span class="ding font">实付金额:</span><span class="price font">5868</span><span class="dai cancellationOfOrder">取消订单</span>
				</p>
			</div>
		</div>
		<div class="main">
			<div class="content">
				<p class="one_p">
					<span class="ding font">订单编号:</span><span class="font">539666012</span><span class="dai font">待付款</span>
				</p>
				<div class="goods">
					<img src="./clothing.jpg" alt="" class="goods_img" />
					<span class="goods_desc">国家队全英赛比赛 正品李宁羽毛球女羽毛球 短裙</span>
					<span class="cheng">x</span><span class="num">5</span>
				</div>
				<div class="goods">
					<img src="./clothing.jpg" alt="" class="goods_img" />
					<span class="goods_desc">国家队全英赛比赛 正品李宁羽毛球女羽毛球 短裙</span>
					<span class="cheng">x</span><span class="num">5</span>
				</div>
				<div class="goods">
					<img src="./clothing.jpg" alt="" class="goods_img" />
					<span class="goods_desc">国家队全英赛比赛 正品李宁羽毛球女羽毛球 短裙</span>
					<span class="cheng">x</span><span class="num">5</span>
				</div>
				<div class="goods">
					<img src="./clothing.jpg" alt="" class="goods_img" />
					<span class="goods_desc">国家队全英赛比赛 正品李宁羽毛球女羽毛球 短裙</span>
					<span class="cheng">x</span><span class="num">5</span>
				</div>
				<p>
					<span class="ding font">实付金额:</span><span class="price font">5868</span><span class="dai cancellationOfOrder">取消订单</span>
				</p>
			</div>
		</div>
	</div>
	<script src="./rem.js"></script>
</body>
</html>